<template>
  <el-form ref="form" :model="form" label-width="80px">
  
  <el-form-item label="活动名称">
    <el-input v-model="form.title"></el-input>   <el-switch v-model="accordion"></el-switch>折叠模式
  </el-form-item>

 <el-collapse v-model="activeNames" @change="handleChange" :accordion="accordion">
  <el-collapse-item title="基础信息" name="1">
    
    <el-form-item label="活动描述">
      <el-input type="textarea" v-model="form.tip"></el-input>
    </el-form-item>

     <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker v-model="form.date1" type="datetime" placeholder="选择日期时间"> </el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-date-picker v-model="form.date2" type="datetime" placeholder="选择日期时间"> </el-date-picker>
    </el-col>
  </el-form-item>
   <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>

    <el-form-item label="内容分类">
    <el-checkbox-group v-model="form.tags">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="内容分类">
    <el-radio-group v-model="form.type">
      <el-radio label="视频"  name="1"></el-radio>
      <el-radio label="音频"  name="2"></el-radio>
      <el-radio label="图文"  name="3"></el-radio> 
    </el-radio-group>
  </el-form-item>

  </el-collapse-item>

  <el-collapse-item title="封面" name="img"> 
      <el-upload class="avatar-uploader" action :auto-upload="false"  :show-file-list="false" :on-change="uploadSectionFile" :limit="1">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload> 
  </el-collapse-item>

  <el-collapse-item title="视频" name="video"> 
          <el-upload class="avatar-uploader" action :auto-upload="false"  :show-file-list="false" :on-change="uploadSectionVideo" :limit="1">
             <video v-if="!videoUrl && videoUrl!=''"  :src="videoUrl" :key='videoUrl'  class="avatar video-avatar" controls="controls">
                请选择现代浏览器
            </video>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> 
  </el-collapse-item>
  
  <el-collapse-item title="富文本编辑" name="3">
        <el-card shadow="never" class="cus-card"> <template #header> 编辑中: </template> <CKEditor v-model="form.content" /> </el-card>
        <el-card shadow="never" class="cus-card" style="margin-top:10px"> <template #header> 预览: </template> <div v-html="form.content"></div> </el-card>
  </el-collapse-item> 
</el-collapse>
 
  
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>



</template>

<script>  
import CKEditor from "@/components/CKEditor.vue";
export default {
    components:{ CKEditor },
    data() {
      return {
        accordion:true,
        form: { name: '', region: '', date1: '', date2: '', delivery: false, tags: [], type: [], resource: '', tip: '', content: '', },  
        activeNames: ['1'],
        imageUrl: '', 
        videoUrl: '', 
      }
    },
    created(){
       console.log('created!',this.$route.params);
       var { id } =   this.$route.params
       if(id) this.getDetail(id)
       // this.getDetail(1)
    },
    methods: {
     async  getDetail(id){
          var data =  await this.post("/article/detail",{id})
           console.log('data!',data.article);
          this.form.id = data.article.id;
          this.form.title = data.article.title;
          this.form.content = data.article.content;
          this.form.tip = data.article.tip;
          this.form.type = data.article.type;
          this.imageUrl = data.article.videoImg;
          this.videoUrl = data.article.video;
          var arr = data.article.actionTime.split("|")
          this.form.date1 = new Date(arr[0]);
          if(arr[1]) this.form.date2 = new Date(arr[1]);
          if(data.code){
             return this.message.info("暂无内容")
          }

      },
     async  onSubmit() {
         console.log('submit!',this.val);
         console.log('submit!',this.form);
         if(this.isEmpty(this.form.title)) return this.message.error("请填写标题")
         if(this.isEmpty(this.form.tip))  return this.message.error("请填写简介") 
         if(this.isEmpty(this.form.date1)) return this.message.error("请填写开始时间")
         if(this.isEmpty(this.form.date2)) return this.message.error("请填写结束时间") 
         var date1 = this.dayjs(this.form.date1).format('YYYY-MM-DD HH:mm:ss')
         var date2 = this.dayjs(this.form.date2).format('YYYY-MM-DD HH:mm:ss')
         var data = { 
          "title": this.form.title, 
           "tip": this.form.tip, 
          "content": this.form.content, 
          "actionTime": [date1,date2].join("|"),
          "video":  this.videoUrl, 
          "videoImg": this.imageUrl, 
          "type": 1 
          }  
         if(this.form.id){
            data =  await this.post("/article/update",data)
         }else{
            data =  await this.post("/article/article",data)
         }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      }, 
      async uploadSectionFile(file){   
           if (file.raw.type.indexOf( 'image') == -1 )  return  this.message.error('仅支持上传图片');
           if (file.raw.size / 1024 / 1024 > 2)  return this.message.error('上传头像图片大小不能超过 2MB!');

           console.log("uploadSectionFile>>>")

            var formData = new FormData();
            formData.append('file', file.raw); 
            var data =  await this.postFile("/upload",formData)
            console.log(data)
            this.imageUrl =  data.url
      },
      async uploadSectionVideo(file){  
           debugger
           if (file.raw.type.indexOf( 'video') == -1 )  return  this.message.error('仅支持上传视频');
           if (file.raw.size / 1024 / 1024 > 500)  return this.message.error('上传头像图片大小不能超过 500MB!');
            var formData = new FormData();
            formData.append('file', file.raw); 
            var data =  await this.postFile("/upload",formData)
            console.log(data)
            this.videoUrl =  data.url
            console.log(  this.videoUrl)
      },
      

    },
  
  }
/*
录制文章 1 代表视频
录制文章 2 代表语音
录制文章 3 代表文章

/article/article 
{ "title": "wzskyline", "content": "123456", "actionTime": "2020-1-11", "video": "123456", "videoImg": "123456", "type": 1 }
*/
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>